"use client"

import type React from "react"

import Image from "next/image"
import Link from "next/link"
import { Heart, Play } from "lucide-react"
import type { MV } from "@/types/mv"
import { formatDuration } from "@/lib/format"
import { cn } from "@/lib/utils"

interface MvCardProps {
  mv: MV
  onLike?: (mv: MV) => void
  className?: string
  showArtist?: boolean
  showLikeButton?: boolean
}

export function MvCard({ mv, onLike, className, showArtist = true, showLikeButton = true }: MvCardProps) {
  const handleLike = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (onLike) {
      onLike(mv)
    }
  }

  return (
    <Link
      href={`/mv/${mv.id}`}
      className={cn("group flex flex-col gap-2 rounded-md p-2 transition-colors hover:bg-muted/50", className)}
    >
      <div className="relative aspect-video overflow-hidden rounded-md">
        <Image
          src={mv.cover || "/placeholder.svg?height=200&width=360"}
          alt={mv.title}
          fill
          className="object-cover transition-transform group-hover:scale-105"
        />
        <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity group-hover:opacity-100">
          <Play size={40} className="fill-white text-white" />
        </div>
        <div className="absolute bottom-2 right-2 rounded bg-black/70 px-1.5 py-0.5 text-xs text-white">
          {formatDuration(mv.duration)}
        </div>
        {showLikeButton && (
          <button
            className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5 opacity-0 transition-opacity group-hover:opacity-100"
            onClick={handleLike}
          >
            <Heart
              size={18}
              className={cn("transition-colors hover:text-primary", mv.isLiked && "fill-primary text-primary")}
            />
          </button>
        )}
      </div>
      <div>
        <div className="font-medium line-clamp-1">{mv.title}</div>
        {showArtist && (
          <div className="text-sm text-muted-foreground line-clamp-1">
            {mv.artists}
          </div>
        )}
      </div>
    </Link>
  )
}

